const TodoList = (props) => {
  const {todos,todoListIs,todoListRemove} = props;
  //点击任务的完成状态
  const onChange = (id) => {
    todoListIs(id)
  }
  //点击删除
  const onClickRemove=(id)=>{
    todoListRemove(id)
  }
  return (
    <ul className="todo-list">
      {/* 编辑样式：editing  已完成样式：completed */}
      
      {todos.map(todo => (
        <li key={todo.id} className={todo.done ? 'completed' : ''}>
          <div className="view">
            <input
              className="toggle"
              type="checkbox"
              readOnly
              checked={todo.done}
              onChange={()=>onChange(todo.id)}
            />
            <label>{todo.text}</label>
            <button className="destroy" onClick={()=>onClickRemove(todo.id)} />
          </div>
          <input  className="edit" defaultValue="Create a TodoMVC template" />
        </li>
      ))}
    </ul>
  )
}

export default TodoList
